import {  useMemo  } from 'react';
import PropTypes from 'prop-types';
import ToDoLi from './ToDoLi';
const ToDoFilter = ({ list, filter, delItem }) => {
  // const [filterList, setFilterList] = useState([]);
  // console.log(filterList, 'todofilter');
  const filterList=useMemo (() => {
    let arr = [];
    if (filter === 'done') {
      arr = list.filter((item) => item.status === 0);
      console.log(arr, 'arr done');
      console.log(list, 'arr done');
    }
    if (filter === 'all') {
      arr = [...list];
    }
    if (filter === 'pending') {
      arr = list.filter((item) => item.status === undefined);
      console.log(arr, 'arr pending');
    }

    // setFilterList(arr);
    return arr
  }, [list, filter]);

  
  return (<ToDoLi filterList={filterList}  delItem={delItem} />) 
    
  
};

// 为 ToDoFilter 组件定义 PropTypes
ToDoFilter.propTypes = {
  list: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    status: PropTypes.number,
  })).isRequired,
  filter: PropTypes.oneOf(['all', 'done', 'pending']).isRequired,
  delItem: PropTypes.func.isRequired,
};


export default ToDoFilter;
